
// 鼠标移入显示，移出隐藏
const text = document.querySelector('input')
const sbtn = document.querySelector('.sous')
const nrong = document.querySelector('.nrong')
const cateBox = document.querySelector('.category')

const contentBox = document.querySelector('.content')
const norpBox = document.querySelector('.norp')
const norp = document.querySelector('.norpBox')
const box = document.querySelector('.box')
const hye = document.querySelector('.hye')
// const contentBox = document.querySelector('.content')


const flag = true

text.onmouseover =function(){
  flag = !flag

  if(flag){
    sbtn.style.display='block'
  }else{
    sbtn.style.display='none'
  }
}

// --------------------------------------------


// 渲染的列表
// 所有和请求相关的参数信息
const info = {
  current: 1,
  pagesize: 30,
  search: '',
  filter: '',
  saleType: 10,
  sortType: 'id',
  sortMethod: 'ASC',
  category: ''
}

getGoodsList()
async function getGoodsList(){
  // 3-1.把info对象转换成 查询字符串
  const data = querystringify(info)

  // 3-2.发送请求
  const res = await pAjax({
    url:'http://localhost:8888/goods/list',
    data:data,
    dataType:'json'
  })
  // console.log(res);

  // 3-3.给total赋值
  total = res.total
  
  // 3-4渲染商品列表
  let str = ''
  res.list.forEach( item =>{
    str +=`
    <li>
    <div class="show">
      <img data-id="${ item.goods_id } "src="${item.img_big_logo}" alt="">
      <span class="hot${ item.is_hot ? 'active' : '' }"> HOT </span>
      <span class="sale${ item.is_sale ? 'active' : '' }"> SALE </span>
    </div>
    <div class="info">
      <p class="title">${item.title}</p>
      <p>
        折扣: ${item.sale_type}
      </p>
      <p class="price">
        <del class="old"> ￥${item.price}</del>
        <span class="current"> ￥${item.current_price}</span>
      </p>
      <p>
        <button>加入购物车</button>
      </p>
    </div>
  </li>
    `
  })
  contentBox.innerHTML = str
}

    $('.show').click(function(){
      window.location.href="./detail.html"
    })

nrong.addEventListener('click', e => {
  console.log('进来了');
  e = e || window.event
  const target = e.target || e.srcElement

  if (target.className === 'cate') {
    console.log(123);
  // 点击的这个有类名, 其余所有的没有类名
  for (let i = 0; i < cateBox.children.length; i++) {
    cateBox.children[i].classList.remove('active')
  }

  target.classList.add('active')


  // 拿到分类内容
  info.category = target.innerText === '全部' ? '' : target.innerText
  info.current = 1

  // 用最新的 info 请求列表数据
  getGoodsList()
}

// 排序按钮
if (target.className === 'sort2') {
  for (let i = 0; i < norp.children.length; i++) {
    norp.children[i].classList.remove('active')
  }
  target.classList.add('active')

  // 拿到当前标签代表的 排序类型(id/sale/price)  排序方式(ASC/DESC)
  info.sortType = target.dataset.type ? target.dataset.type : 'id'
  info.sortMethod = target.dataset.method ? target.dataset.method : 'ASC'

  // 用最新的 info 请求列表数据
  getGoodsList()
}

})
  
// 2-3. 选择一页显示多少条
// select.addEventListener('change', () => {
//   info.pagesize = select.value
//   info.current = 1
//   getGoodsList()
// })


      
hye.addEventListener('click', e => {
  e = e || window.event
  const target = e.target || e.srcElement
  // 上一页
if (target.className === 'addre') {
  // 直接 current--
  if (info.current <= 1) return
  info.current--
  getGoodsList()
}

// 下一页
if (target.className === 'preed') {
  console.log(123);
  if(info.current >= total) return
  info.current++
  getGoodsList()
}
})



// 4. 每一个商品的点击事件
// 点击的时候可以跳转到详情页
// 4-1. 事件委托
contentBox.addEventListener('click', e => {
  e = e || window.event
  const target = e.target || e.srcElement
  console.log(111);
  //4-2. 判断点击的是什么
  if (target.nodeName === 'IMG') {

    // console.log(111);
    // window.location.href = './detail.html'

    // 拿到商品 id, 放在 sessionStorage 内
    // 渲染页面的时候, 可以直接渲染好
    const id = target.dataset.id
    // 存储好
    window.sessionStorage.setItem('id', id)
    // 跳转页面
    window.location.href = './detail.html'
  }
})